<template>
  <!-- 合同总详情页 -->
  <el-main>
    <el-card shadow="never">
      <el-button
        type="primary"
        @click="printPreview"
        v-if="$route.query.id"
        class="printButton"
        >打印预览</el-button
      >
      <el-tabs v-model="activeName">
        <el-tab-pane label="合同信息" :name="1">
          <contract-detail></contract-detail>
        </el-tab-pane>
        <el-tab-pane label="客户信息" :name="2">
          <customer-detail></customer-detail>
        </el-tab-pane>
        <el-tab-pane label="生产信息" :name="3">
          <produce-detail></produce-detail>
        </el-tab-pane>
        <el-tab-pane label="配送信息" :name="4">
          <deliver-detail></deliver-detail>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-main>
  <print-dom ref="printDom" v-show="false" id="printDom_page"></print-dom>
</template>
<script>
// import contractDetail from './contractDetail.vue'
import contractDetail from '../contractDetail/index.vue'
import produceDetail from './produceOrderDetail'
import customerDetail from './customerDetail'
import deliverDetail from './deliverDetail'
import print from '@/utils/print'
import printDom from '../components/printDom.vue'
export default {
  name: 'detailList',
  data () {
    return {
      activeName: 1
    }
  },
  components: {
    contractDetail,
    produceDetail,
    customerDetail,
    deliverDetail,
    printDom
  },
  methods: {
    //打印预览
    async printPreview () {
      let { data } = await this.$API.contract.getContractById.post({ id: this.$route.query.id })
      this.$refs.printDom.provideForm = data.customerData
      this.$refs.printDom.lessorArticle = data.lessorArticle
      this.$refs.printDom.quotesData = data.quotesData
      this.$refs.printDom.needForm = data.contractFit
      this.$refs.printDom.contactData = data
      this.$nextTick(() => {
        let dom = document.querySelector('#printDom_page')
        let clone = dom.cloneNode(true)
        clone.style.display = 'block'
        print(clone)
      })
    }

  }
}
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
  position: relative;
}
.printButton {
  position: absolute;
  right: 20px;
  z-index: 999;
}
</style>